<template>
  <view class="container goods-page">
    <view class="list-header">
      <view class="search-box">
        <u-search :show-action="true"
                  :show-icon="false"
                  shape="square"
                  bg-color="#e5e7eb8a"
                  v-model="queryParam.keywords"
                  :show-action-icon="true"
                  :placeholder="(queryParam.category_id?'正在搜索分类商品':'搜索想要的内容')"
                  @search="search"
                  @custom="search"
                  @clear="search"
        />
      </view>
      <view class="sort-box dis-flex b-f b-b">
        <view @tap="switchSortType" data-type="all" class="flex-box t-c p-r" data-index="0 "
              :id="'list-' + (sortType === 'all' ? true : 0)">
          <text>综合</text>
        </view>
        <view @tap="switchSortType" data-type="sales" class="dis-flex flex-x-center flex-box t-c p-r" data-index="1"
              :id="'list-' + (sortType === 'sales' ? true : 0)">
          <text>销量</text>
          <view class="sort_arrow dis-flex flex-dir-column flex-x-center flex-y-center">
            <text :class="'iconfont icon-arrow-top ' + (sortSales ? '' : 'active')"></text>
            <text :class="'iconfont icon-arrow-bottom ' + (sortSales ? 'active' : '')"></text>
          </view>
        </view>
        <view @tap="switchSortType" data-type="price" class="dis-flex flex-x-center flex-box t-c p-r" data-index="2"
              :id="'list-' + (sortType === 'price' ? true : 0)">
          <text class="price__text">价格</text>
          <view class="sort_arrow dis-flex flex-dir-column flex-x-center flex-y-center">
            <text :class="'iconfont icon-arrow-top ' + (sortPrice ? 'active' : '')"></text>
            <text :class="'iconfont icon-arrow-bottom ' + (sortPrice ? '' : 'active')"></text>
          </view>
        </view>
      </view>
    </view>
    <view class="goods-box" v-if="flowList.length">
      <u-waterfall v-model="flowList" ref="uWaterfall" :value="[]" id-key="item_id">
        <template v-slot:left="{leftList}">
          <c_waterfall_item :dataList="leftList" :lazy-load="lazyLoadConfig"/>
        </template>
        <template v-slot:right="{rightList}">
          <c_waterfall_item :dataList="rightList" :lazy-load="lazyLoadConfig"/>
        </template>
      </u-waterfall>
      <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="getGoodsList"></u-loadmore>
    </view>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
import c_waterfall_item from "@/components/waterfall/c_waterfall_item.vue";
import goods_api from "@/common/goods_api";

export default {
  components: {
    c_waterfall_item
  },
  data() {
    return {
      sortType: 'all',
      // 排序类型
      sortPrice: false,
      //销量排序
      sortSales: false,
      loadStatus: 'loadmore',
      flowList: [],
      lazyLoadConfig: {
        duration: 400,
        threshold: 0
      },
      has_more: true,
      queryParam: {
        order_by: '',
        page: 0,
        limit: 20,
        keywords: ''
      },
      scrollTop: 0
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad: function (option) {
    if (option.keywords) {
      this.queryParam.keywords = option.keywords
    }
    if (option.category_id) {
      this.queryParam.category_id = option.category_id
    }
    this.getGoodsList(true)
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  //触底
  onReachBottom() {
    if (this.has_more) {
      this.getGoodsList(false)
    }
  },
  /**
   * 设置分享内容
   */
  onShareAppMessage: function (params) {
    return {
      title: '商品列表',
      desc: '',
      path: '/pages/goods/index?' + params
    };
  },
  methods: {
    formatList(list) {
      if (!list) {
        return
      }
      for (let i = 0; i < list.length; i++) {
        // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
        let item = JSON.parse(JSON.stringify(list[i]))
        this.flowList.push(item);
      }
    },
    search(e) {
      this.queryParam.category_id = ''
      this.queryParam.keywords = e
      this.getGoodsList(true)
    },
    clearWaterfall() {
        this.$nextTick(() => {
            if (this.$refs.uWaterfall && typeof this.$refs.uWaterfall.clear === 'function') {
                this.$refs.uWaterfall.clear();
            }
        });
    },
    getGoodsList(init) {
      if (init) {
        this.flowList = [];
        this.loadStatus = 'loadmore';
        this.queryParam.page = 0
        this.has_more = true
        this.clearWaterfall()
      }
      this.queryParam.page += 1
      goods_api.list(this.queryParam).then(res => {
        if (res.code === 0) {
          if (res.data.list.length > 0) {
            this.$nextTick(function () {
              this.formatList(res.data.list)
            })
          } else {
            this.has_more = false
            this.loadStatus = 'nomore'
          }
          if (res.data.lazyLoadConfig) {
            this.lazyLoadConfig = res.data.lazyLoadConfig
          }
        }
      })
    },

    /**
     * 切换排序方式
     */
    switchSortType: function (e) {
      let that = this;
      let newSortType = e.currentTarget.dataset.type;
      if (newSortType === 'all') {
        this.queryParam.order_by = ''
      } else if (newSortType === 'sales') {
        this.sortSales = !this.sortSales
        if (this.sortSales) {
          this.queryParam.order_by = 'sales_desc'
        } else {
          this.queryParam.order_by = 'sales_asc'
        }
      } else if (newSortType === 'price') {
        this.sortPrice = !this.sortPrice
        if (this.sortPrice) {
          this.queryParam.order_by = 'price_asc'
        } else {
          this.queryParam.order_by = 'price_desc'
        }
      }
      this.sortType = newSortType;
      that.getGoodsList(true);
    },


  }
};
</script>
<style lang="scss">
@import 'index.scss';
</style>
